<template>
  <a-modal v-model:visible="isShow" title="下载器信息" okText="保存" @ok="doSave" :confirmLoading="loading">
    <a-form ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="下载器名称" name="name">
        <a-input v-model:value="form.name" @blur="textTrim('name')"/>
      </a-form-item>
      <a-form-item label="下载器类型" name="type">
        <a-select
          v-model:value="form.type"
        >
          <a-select-option v-for="option in typeOptions" :key="option.value" :value="option.value">
            {{ option.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="下载器地址" name="address">
        <a-input v-model:value="form.address" @blur="textTrim('address')"/>
      </a-form-item>
      <a-form-item label="登录名" name="loginname">
        <a-input v-model:value="form.loginname" @blur="textTrim('loginname')"/>
      </a-form-item>
      <a-form-item label="登录密码" name="loginpwd">
        <a-input v-model:value="form.loginpwd" @blur="textTrim('loginpwd')"/>
      </a-form-item>
      <a-form-item label="下载目录映射" name="">
        <a-input addon-before="原始目录" v-model:value="form.volumeHost" @blur="textTrim('volumeHost')" placeholder="">
          <template #suffix>
            <a-tooltip title="1.可留空，连接信息正确时会自动获取；2.下载器为Docker运行时，应使用容器中的下载目录。">
              <InfoCircleOutlined />
            </a-tooltip>
          </template>
        </a-input>  
        <a-input addon-before="映射目录" v-model:value="form.volumeContainer" @blur="textTrim('volumeContainer')" placeholder="管理目录中对应的路径" readonly>
          <template #suffix>
            <FolderOpenOutlined @click="folderSelectShow=true"/>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item label="描述" name="description">
        <a-textarea v-model:value="form.description" :rows="3"/>
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 路径选择 -->
  <a-modal v-model:visible="folderSelectShow" title="选择目录" @ok="getSelectedFolder">
    <FileSelector ref="refFileSelector"/>
  </a-modal>
</template>

<script>
import api from '../../api/api.js'
import { FolderOpenOutlined, InfoCircleOutlined} from '@ant-design/icons-vue'
import FileSelector from '../components/FileSelector.vue'
import { ref } from 'vue';
export default {
  name: 'ClientAdd',
  components: {
    FileSelector,
    FolderOpenOutlined,
    InfoCircleOutlined
  },
  props: {
    modelData: Object,
    success: Function,
    failure: Function
  },
  setup() {
    const refFileSelector = ref()
    const folderSelected = () => {
      return refFileSelector.value.selectedKeys
    }
    return {
      refFileSelector, folderSelected
    }
  },
  data() {
    return {
      module: 'client',
      isShow: false, loading: false,folderSelectShow: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      typeOptions: [
        { label: 'Transmission', value: 'transmission' },
        { label: 'QBittorrent', value: 'qbittorrent' }
      ],
      form: {
        id: '',
        name: '',
        type: '',
        address: '',
        loginname: '',
        loginpwd: '',
        volumeHost: '',
        volumeContainer: '',
        description: '',
      },
      rules: {
        name: [
          { required: true, message: '请填写站点名称', trigger: 'blur' },
          { max: 50, message: '长度需50以内', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请填写下载器类型', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请填写下载器地址', trigger: 'blur' },
          { max: 200, message: '长度需为200以内', trigger: 'blur' },
        ],
        loginname: [
          { max: 100, message: '长度需为100以内', trigger: 'blur' },
        ],
        loginpwd: [
          { max: 100, message: '长度需为100以内', trigger: 'blur' },
        ],
        description: [
          { max: 100, message: '长度需为100以内', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    open(form) {
        this.form = form
        this.isShow = true
    },
    textTrim(col) {
      this.form[col] = this.form[col] ? this.form[col].trim() : ''
      // console.log(`'${this.form[col]}'`)
    },
    getSelectedFolder() {
      this.form.volumeContainer = this.folderSelected()[0]
      this.folderSelectShow = false
    },
    doSave() {
      this.$refs.form
      .validate()
      .then(() => {
        // console.log('values', this.form);
        this.loading = true
        api.save(this.module, this.form).then(response => {
          if (response.data.code === 1) {
            this.isShow = false
            this.form = {}
            this.$message.success(response.data.message?response.data.message:'保存成功')
            // 回调
            this.$nextTick(()=>{
                this.success && this.success()
            })
          } else {
            this.$message.error(`保存失败：${response.data.message}`)
            // 
            this.failure && this.failure()
          }
        }).catch((error)=>{
          this.$message.error(`保存失败：${error.message}`)
        }).then(()=>{
          this.loading = false
        })
      })
      .catch(error => {
        console.log('error', error);
      })
    },
  }
}
</script>